<template>
	<div class="myindent">
		<div class="template" v-show="loading">
			<div><mt-spinner :type="3" :size="60"></mt-spinner></div>
		</div>
		<header class="navigation">
			<div @click="retreat"><img src="../assets/rightbut.png"></div>
			<div>我的订单</div>
			<div></div>
		</header>
		
		<div class="indenttype"> 
			<div v-for='item in indenttype' :class="name == item.name ?'on' :'indenttype_d'" @click="indenttypeon(item.name)">{{item.name}}</div>
		</div>
		<!--全部-->
		<!--v-if='name == "全部"'-->
		<ul v-infinite-scroll="loadMore" infinite-scroll-disabled="Loading" infinite-scroll-distance="10">
			<div class="allindent" >
				<div v-for="item in doodslist">
					<div class="indentnumder">
						<div>订单编号:{{item.orderNo}}</div>
						<div v-if="item.state == 1">等待买家付款</div>
						<div v-if="item.state == 3">买家已付款</div>
						<div v-if="item.state == 4">卖家已发货</div>
						<div v-if="item.state == 5">交易成功</div>
					</div>
					
					<div class="goods">
						<div class="goodsdetails" v-for='items in item.data' @click="indenton(item.orderNo,item.state)">
							<div class="goodsimg">
								<img :src="items.goodsImg">
							</div>
							<div class="goodsName">
								<div>{{items.goodsName}}</div>
								<div><span v-for='(arr,index) in items.param'>{{index}}:{{arr}}&nbsp;</span></div>
							</div>
							<div class="price">
								<div>￥{{items.price}}</div>
								<div>￥{{items.orginPrice}}</div>
								<div>×{{items.count}}</div>
							</div>
						</div>
						
						<div class="total">共计{{item.totalcount}}件商品&nbsp;&nbsp;合计:￥{{item.totalprice}}(含运费{{item.expressFee}})</div>
						
						<div class="state">
							<div class="state_don" v-if="item.state == 1" @click="payon(item.orderNo)">付款</div>
							<div class="state_don" v-if="item.state == 3" @click="indenton(item.orderNo,item.state)">查看详情</div>
							<div class="state_don" v-if="item.state == 4" @click="indenton(item.orderNo,item.state)">查看详情</div>
							<div class="state_d" v-if="item.state == 5" @click="indenton(item.orderNo,item.state)">查看详情</div>
							<div class="state_d" v-if="item.state == 5" @click="del(item.orderNo)">删除订单</div>
							<div class="state_d" v-if="item.state == 17" @click="del(item.orderNo)">删除订单</div>
							<div class="state_d" v-if="item.state == 1" @click="offindenton(item.orderNo)">取消订单</div>
							<div class="state_d" v-if="item.state == 1" @click="contact">联系卖家</div>
						</div>
						
					</div>
				</div>
				
			</div>
		</ul>
		<!--待付款-->
		<!--<div class="allindent" v-if='name == "待付款"'>
			
			<div v-for="item in doodslist">
				<div class="indentnumder">
					<div>订单编号:{{item.orderNo}}</div>
					<div>等待买家付款</div>
				</div>
				
				<div class="goods" >
					<div class="goodsdetails" v-for='items in item.data'  @click="indenton(item.orderNo,1)">
						<div class="goodsimg">
							<img :src="items.goodsImg">
						</div>
						<div class="goodsName">
							<div>{{items.goodsName}}</div>
							<div><span v-for='(arr,index) in items.param'>{{index}}:{{arr}},</span></div>
						</div>
						<div class="price">
							<div>￥{{items.price}}</div>
							<div>￥{{items.orginPrice}}</div>
							<div>×{{items.count}}</div>
						</div>
					</div>
					
					<div class="total">共计{{item.totalcount}}件商品&nbsp;&nbsp;合计:￥{{item.totalprice}}(含运费{{item.expressFee}})</div>
					
					<div class="state">
						<div class="state_don" @click="payon(item.orderNo)">付款</div>
						<div class="state_d" @click="offindenton(item.orderNo)">取消订单</div>
						<div class="state_d" @click="contact">联系卖家</div>
					</div>
					
				</div>
			</div>
			
		</div>-->
		
		<!--待发货-->
		<!--<div class="allindent" v-if='name == "待发货"'>
			
			<div v-for="item in doodslist">
				<div class="indentnumder">
					<div>订单编号:{{item.orderNo}}</div>
					<div>买家已付款</div>
				</div>
				
				<div class="goods" >
					<div class="goodsdetails" v-for='items in item.data' @click="indenton(item.orderNo,3)">
						<div class="goodsimg">
							<img :src="items.goodsImg">
						</div>
						<div class="goodsName">
							<div>{{items.goodsName}}</div>
							<div><span v-for='(arr,index) in items.param'>{{index}}:{{arr}},</span></div>
						</div>
						<div class="price">
							<div>￥{{items.price}}</div>
							<div>￥{{items.orginPrice}}</div>
							<div>×{{items.count}}</div>
						</div>
					</div>
					
					<div class="total">共计{{item.totalcount}}件商品&nbsp;&nbsp;合计:￥{{item.totalprice}}(含运费{{item.expressFee}})</div>
					
					<div class="state">
						<div class="state_don" @click="indenton(item.orderNo,3)">查看详情</div>
					</div>
					
				</div>
			</div>
			
		</div>-->
		
		<!--待收货-->
		<!--<div class="allindent" v-if='name == "待收货"'>
			
			<div v-for="item in doodslist">
				<div class="indentnumder">
					<div>订单编号:{{item.orderNo}}</div>
					<div>卖家已发货</div>
				</div>
				
				<div class="goods" >
					<div class="goodsdetails" v-for='items in item.data' @click="indenton(item.orderNo,4)">
						<div class="goodsimg">
							<img :src="items.goodsImg">
						</div>
						<div class="goodsName">
							<div>{{items.goodsName}}</div>
							<div><span v-for='(arr,index) in items.param'>{{index}}:{{arr}},</span></div>
						</div>
						<div class="price">
							<div>￥{{items.price}}</div>
							<div>￥{{items.orginPrice}}</div>
							<div>×{{items.count}}</div>
						</div>
					</div>
					
					<div class="total">共计{{item.totalcount}}件商品&nbsp;&nbsp;合计:￥{{item.totalprice}}(含运费{{item.expressFee}})</div>
					
					<div class="state">
						<div class="state_don" @click="indenton(item.orderNo,4)">查看详情</div>
					</div>
					
				</div>
			</div>
			
		</div>-->
		
		<!--待评价-->
		<!--<div class="allindent" v-if='name == "待评价"'>
			
			<div v-for="item in doodslist">
				<div class="indentnumder">
					<div>订单编号:{{item.orderNo}}</div>
					<div>交易成功</div>
				</div>
				
				<div class="goods" >
					<div class="goodsdetails" v-for='items in item.data' @click="indenton(item.orderNo,5)">
						<div class="goodsimg">
							<img :src="items.goodsImg">
						</div>
						<div class="goodsName">
							<div>{{items.goodsName}}</div>
							<div><span v-for='(arr,index) in items.param'>{{index}}:{{arr}},</span></div>
						</div>
						<div class="price">
							<div>￥{{items.price}}</div>
							<div>￥{{items.orginPrice}}</div>
							<div>×{{items.count}}</div>
						</div>
					</div>
					
					<div class="total">共计{{item.totalcount}}件商品&nbsp;&nbsp;合计:￥{{item.totalprice}}(含运费{{item.expressFee}})</div>
					
					<div class="state">
						<div class="state_d" @click="indenton(item.orderNo,5)">查看详情</div>
						<div class="state_d" @click="del(item.orderNo)">删除订单</div>
					</div>
					
				</div>
			</div>
			
		</div>-->
		
	</div>
</template>

<script>
	import { BaseUrl } from '../Baseurl/common.js';
	import { Toast } from 'mint-ui';
	export default{
		data(){
			return{
				indenttype:[{'name':'全部'},{'name':'待付款'},{'name':'待发货'},{'name':'待收货'},{'name':'待评价'}],
				name:'',
				token:'',
				doodslist:[],   //商品列表
				loading:true,
				Loading:'',
				index:0
			}
		},
		created(){
			this.token = localStorage.getItem('token');
			var state = localStorage.getItem('state')
			if(state == 0){
				this.name = '待付款'
				this.doodslist = [];
				this.payment();
			}else if(state == 1){
				this.name = '待发货'
				this.doodslist = [];
				this.shipping()
				this.state = 1;
			}else if(state == 2){
				this.name = '待收货'
				this.doodslist = [];
				this.stayreceiving();
			}else if(state == 3){
				this.name = '待评价'
				this.doodslist = [];
				this.stayevaluate();
			}else{
				this.name = '全部'
				this.doodslist = [];
				this.all();
			}
			
			
		},
		methods:{
			//导航退后
			retreat:function(){
				window.history.go(-1);
			},
			//订单详情
			indenton:function(orderNo,state){
				this.$router.push({
					path:'/myindentdetails?orderNo=' + orderNo + '&state=' + state
				})
			},
			//订单状态
			indenttypeon:function(name){
				this.name = name;
				this.index = 0;
				this.doodslist = [];
				if(name == '全部'){
					this.all();
					localStorage.setItem('state','4')
				}else if(name == '待付款'){
					this.payment();
					localStorage.setItem('state','0')
				}else if(name == '待发货'){
					this.shipping();
					localStorage.setItem('state','1')
				}else if(name == '待评价'){
					this.stayevaluate();
					localStorage.setItem('state','3')
				}else{
					this.stayreceiving();
					localStorage.setItem('state','2')
				}
			},
			//取消订单
			offindenton:function(orderNo){
				var url = BaseUrl + 'orders/cancelorders' + '?orderNo=' + orderNo + '&appId=wap' + '&token=' + this.token;
				this.$http.get(url).then(res=>{
					if(res.data.code == '10000'){
						Toast({
							message: "取消成功",
							position: 'middle',
							duration: 3000
						})
						if(this.name == '全部'){
							this.all();
						}else{
							this.payment();
						}
					}
				}).catch(error=>{
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
			},
			//联系卖家
			contact:function(){
				window.location.href = 'http://chat56.live800.com/live800/chatClient/chatbox.jsp?companyID=944015&configID=155782&jid=9694995927'
			},
			//支付
			payon:function(orderNo){
				var url = BaseUrl + 'wxpay/payH5?token=' + this.token + '&orderNo=' + orderNo + '&appId=wap';
				this.$http.get(url).then(res=>{
					if(res.data.code == '10000'){
						var prepay_id = res.data.data.prepay_id;
						var packages = res.data.data.timestamp;
						window.location.href  = 'https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?&prepay_id=' + prepay_id + '&package=' +packages;
					}
				}).catch(error=>{
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
			},
			//全部订单
			all(){
				this.loading = true;
				var url = BaseUrl + 'orders/myorders?appId=wap&' + 'token=' + this.token + "&start=" + this.index + '&length=5';
				this.$http.get(url).then(res=>{
					
					if(res.data.code == '10000'){
						this.loading = false;
//						console.log(res.data.orderList);
//						this.doodslist = res.data.orderList;
						this.doodslist = this.doodslist.concat(res.data.orderList);
						if(res.data.orderList == "") {
							this.Loading = true;
							Toast({
								message: "没有更多的数据",
								position: 'middle',
								duration: 1000
							})
							return;
						} else if(res.data.orderList != "") {
							this.Loading = false;
							this.index++;
						}
					}
				}).catch(error=>{
					this.loading = false;
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
			},
			//待付款
			payment(){
				this.loading = true;
				var url = BaseUrl + 'orders/notpayed?appId=wap' + '&token=' + this.token + "&start=" + this.index + '&length=5';
				this.$http.get(url).then(res=>{
					if(res.data.code == '10000'){
						this.loading = false;
//						this.doodslist = res.data.orderList;
						this.doodslist = this.doodslist.concat(res.data.orderList);
						if(res.data.orderList == "") {
							this.Loading = true;
							Toast({
								message: "没有更多的数据",
								position: 'middle',
								duration: 1000
							})
							return;
						} else if(res.data.orderList != "") {
							this.Loading = false;
							this.index++;
						}
					}
				}).catch(error=>{
					this.loading = false;
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
			},
			//待发货
			shipping(){
				this.loading = true;
				var url = BaseUrl + 'orders/notsended?appId=wap' + '&token=' + this.token + "&start=" + this.index + '&length=5';
				this.$http.get(url).then(res=>{
					if(res.data.code == '10000'){
					this.loading = false;
//						this.doodslist = res.data.orderList;
						this.doodslist = this.doodslist.concat(res.data.orderList);
						if(res.data.orderList == "") {
							this.Loading = true;
							Toast({
								message: "没有更多的数据",
								position: 'middle',
								duration: 1000
							})
							return;
						} else if(res.data.orderList != "") {
							this.Loading = false;
							this.index++;
						}
					}
				}).catch(error=>{
					this.loading = false;
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
			},
			//待评价
			stayevaluate(){
				this.loading = true;
				var url = BaseUrl + 'orders/notjudged?appId=wap' + '&token=' + this.token + "&start=" + this.index + '&length=5';
				this.$http.get(url).then(res=>{
					if(res.data.code == '10000'){
					this.loading = false;
//						this.doodslist = res.data.orderList;
						this.doodslist = this.doodslist.concat(res.data.orderList);
						if(res.data.orderList == "") {
							this.Loading = true;
							Toast({
								message: "没有更多的数据",
								position: 'middle',
								duration: 1000
							})
							return;
						} else if(res.data.orderList != "") {
							this.Loading = false;
							this.index++;
						}
					}
				}).catch(error=>{
					this.loading = false;
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
			},
			//待收货
			stayreceiving(){
				this.loading = true;
				var url = BaseUrl + 'orders/notrecieved?appId=wap' + '&token=' + this.token + "&start=" + this.index + '&length=5';
				this.$http.get(url).then(res=>{
					if(res.data.code == '10000'){
					this.loading = false;
//						this.doodslist = res.data.orderList;
						this.doodslist = this.doodslist.concat(res.data.orderList);
						if(res.data.orderList == "") {
							this.Loading = true;
							Toast({
								message: "没有更多的数据",
								position: 'middle',
								duration: 1000
							})
							return;
						} else if(res.data.orderList != "") {
							this.Loading = false;
							this.index++;
						}
					}
				}).catch(error=>{
					this.loading = false;
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
			},
			loadMore(){
				this.Loading = this.Loading;
				if(this.Loading == false){
					setTimeout(() => {
						
						if(this.name == '全部'){
							this.all(this.index);
						}else if(this.name == '待付款'){
							this.payment(this.index);
						}else if(this.name == '待发货'){
							this.shipping(this.index);
						}else if(this.name == '待收货'){
							this.stayreceiving(this.index);
						}else{
							this.stayevaluate(this.index);
						}
						this.Loading = this.Loading;
					}, 100);
				}
			},
			//删除订单
			del:function(orderNo){
				var url = BaseUrl + 'orders/delorders?orderNo=' + orderNo + '&token=' + this.token + '&appId=wap';
				this.$http.get(url).then(res=>{
					if(res.data.code == '10000'){
						Toast({
							message: "删除成功",
							position: 'middle',
							duration: 3000
						})
						if(this.name == '全部'){
							this.all();
						}else{
							this.stayevaluate();
						}
					}
				})
			}
		}
	}
</script>

<style scoped='scoped'>
	.myindent{
		width: 100%;
		height: 100%;
	}
	.template{
		width: 100%;
		height: 100%;
		/*background: rgba(0,0,0,0.5);*/
		position: absolute;
		z-index: 99;
	}
	.template div{
		position: absolute;
		top: 5.5rem;
		left: 50%;
		margin-left: -0.6rem;
	}
	.navigation{
		height: 8%;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 0.24rem;
		color: #323232;
		font-size: 0.36rem;
	}
	
	.navigation img{
		width: 0.2rem;
		height: 0.36rem;
		display: block;
	}
	
	.indenttype{
		height: 8%;
		padding: 0 0.25rem;
		display: flex;
		justify-content: space-around;
		border-bottom: 0.16rem solid #f2f2f2;
	}
	.indenttype_d{
		padding: 0.2rem 0.2rem 0.25rem 0.2rem;
		color: #323232;
		font-size: 0.27rem;
	}
	.on{
		padding: 0.2rem 0.2rem 0.25rem 0.2rem;
		color: #ff2040;
		font-size: 0.27rem;
		border-bottom: 1px solid #ff2040;
	}
	ul{
		height: 83%;
		overflow-y: auto;
	}
	.indentnumder{
		display: flex;
		justify-content: space-between;
		padding: 0.42rem 0 0.23rem 0;
		margin: 0 0.25rem;
		border-bottom: 1px solid #ccc;
	}
	.indentnumder div:first-child{
		font-size: 0.27rem;
		color:  #323232;
	}
	.indentnumder div:last-child{
		font-size: 0.23rem;
		color: #ff2040;
	}
	.goods{
	}
	.goodsdetails{
		display: flex;
		justify-content: space-between;
		margin-top: 0.2rem;
		background: #f5f5f5;
		padding: 0.2rem 0.37rem 0.2rem 0.45rem;
	}
	.goodsimg{
		width: 1.4rem;
		height: 1.4rem;
	}
	.goodsimg img{
		width: 100%;
		height: 100%;
	}
	.goodsName{
		width: 3.4rem;
	}
	.goodsName div:nth-child(1){
		font-size: 0.26rem;
		color: 323232;
		overflow: hidden;
	  	text-overflow:ellipsis;
	  	display: -webkit-box;
	  	-webkit-line-clamp: 2;
	  	-webkit-box-orient: vertical;
	  	width:3.4rem;
	}
	.goodsName div:nth-child(2){
		font-size: 0.21rem;
		color: #b6b6b6;
		margin-top: 0.3rem;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.price{
		text-align: right;
	}
	.price div:nth-child(1){
		font-size: 0.17rem;
		color: #323232;
	}
	.price div:nth-child(2){
		font-size: 0.17rem;
		color: #989898;
		text-decoration: line-through;
	}
	.price div:nth-child(3){
		font-size: 0.17rem;
		color: #989898;
	}
	.total{
		text-align: right;
		padding: 0.35rem 0;
		margin: 0 0.25rem;
		color: #323232;
		border-bottom: 1px solid #ccc;
	}
	.state{
		display: flex;
		flex-direction: row-reverse;
		padding: 0.2rem 0.25rem;
	}
	.state_d{
		padding:0.1rem 0.2rem;
		border-radius: 0.2rem;
		border: 1px solid #323232;
		color: #323232;
		font-size: 0.23rem;
		margin-left: 0.15rem;
	}
	.state_don{
		padding:0.1rem 0.2rem;
		border-radius: 0.2rem;
		border: 1px solid #ff2040;
		color: #ff2040;
		font-size: 0.23rem;
		margin-left: 0.15rem;
	}
</style>